$hui1:#202425;
$hui2:#463f41;
$pink:#f62461;
html,body{
    height: auto;
    width: 100%;
}
a{
    text-decoration: none;
    color: white;
}
li{
    list-style: none;
}
*{
    margin: 0;
    padding: 0;
}
.allbox{
    width: 100%;
    height: auto;
    header{
        background: rgba(0, 0, 0, 0.8);
        position: relative;
        top:0;
        left:0;
        z-index: 999;
        li:hover{
            background: rgba(255, 255, 255, 0.2);
            border-bottom:0.04rem solid white;
        }
        .active{
            background: rgba(255, 255, 255, 0.2);
            border-bottom:0.04rem solid white;
        }
    }
    .banner{
        width: 100%;
        height: 9.48rem;
        overflow: hidden;
        background: pink;
        margin-top: -0.8rem;
        .swiper-container{
            width: 100%;
            height: 9.48rem;
            font-size: 5rem;
            .swiper-slide{
                width: 100%;
                height: 9.48rem;
                img{
                    width:100%;
                    height: 9.48rem;
                }
            }
            .swiper-pagination{
                bottom:5.5rem;
                height: 0.5rem;
                .swiper-pagination-bullet{
                    transition: 0.3s all ease;
                    border-radius: 0;
                    width: 0.32rem;
                    height: 0.04rem;
                    background: #828080;
                    margin-left: 0.04rem;
                }
                .swiper-pagination-bullet-active{
                    background: white;
                }
            }
        }
    }
    .word{
        width: 100%;
        height: 1.2rem;
        background: black;
        overflow: hidden;
        p{
            text-align: center;
            line-height: 0.48rem;
            font-size: 0.23rem;
            color: white;
        }
    }
    .bookcover{
        width: 100%;
        height: 14.04rem;
        background: url(../img/coverback.png) no-repeat;
        background-size: 100% 100%;
        background-position: 100%;
        position: relative;
        img{
            position:absolute;
            transform: scale(1);
            transition: 0.5s all ease;
            z-index: 1;
            cursor: pointer;
        }
        img:hover{
            transform: scale(1.1);
            z-index: 999;
        }
        .bigimg{
            width: 3.31rem;
            height: 4.25rem;
        }
        .middleimg{
            width: 2.08rem;
            height: 3.03rem;
        }
        .smallimg{
            width: 1.89rem;
            height: 1.89rem;
        }
        .b1{
            left:7.85rem;
            top:0.5rem;
        }
        .b2{
            left:7.85rem;
            top:4.94rem;
        }
        .b3{
            left:7.85rem;
            top:9.39rem;
        }
        .b4{
            left:4.35rem;
            top:4.36rem;
        }
        .b5{
            left:11.35rem;
            top:4.36rem;
        }
        .m1{
            left:2.08rem;
            top:4.94rem;
        }
        .m2{
            left:5.58rem;
            top:1.14rem;
        }
        .m3{
            left:5.58rem;
            top:8.8rem;
        }
        .m4{
            left:11.35rem;
            top:1.14rem;
        }
        .m5{
            left:11.35rem;
            top:8.8rem;
        }
        .m6{
            left:14.85rem;
            top:4.94rem;
        }
        .s1{
            left:3.5rem;
            top:2.27rem;
        }
        .s2{
            left:3.5rem;
            top:8.8rem;
        }
        .s3{
            left:13.62rem;
            top:2.27rem;
        }
        .s4{
            left:13.62rem;
            top:8.8rem;
        }

    }
    .introduce{
        width:100%;
        height: 10.51rem;
        background: url(../img/intro_back.png) no-repeat;
        background-size: 100% 100%;
        background-position: 100%;
        .left{
            float: left;
            margin:3.4rem 0 0 3.55rem;
            .introword{
                font-size: 0.2rem;
                line-height: 0.6rem;
                margin-bottom: 0.6rem;
                letter-spacing: 0.03rem
            }
            .code{
                margin-left:-0.3rem;
                dl{
                    width: 1.82rem;
                    float: left;
                    margin-right: 0.58rem;
                    dt{
                        width: 100%;
                        margin-bottom: 0.25rem;
                        img{
                            width: 1.34rem;
                            height: 1.34rem;
                            display: block;
                            margin:0 auto;
                            
                        }
                    }
                    dd{
                        width: 100%;
                        text-align: center;
                        font-size:0.2rem;
                        .ios{
                            width: 0.2rem;
                            height: auto;
                        }
                        .andriod{
                            width: 0.21rem;
                            height: auto;
                        }
                    }
                }
            }
            
        }
        .right{
            float: right;
            margin-top: 2.2rem;
            img{
                width: 9.83rem;
                height: auto;
            }
        }
        
    }
    .welfare{
        width:100%;
        height: 10.8rem;
        overflow: hidden;
        .title{
            width: 1.35rem;
            height: auto;
            display: block;
            margin: 0.75rem auto 0.5rem;
        }
        .Wword{
            text-align: center;
            font-size: 0.2rem;
            line-height: 0.4rem;
            letter-spacing: 0.02rem;
            color: #202425;
            margin-bottom: 0.4rem;
            .cmscenter{
                width: 1.49rem;
                height:0.56rem;
                border:1px solid #f62461;
                border-radius: 5px;
                color: #f62461;
                text-align: center;
                line-height: 0.56rem;
                font-size:0.16rem;
                margin: 0 auto;
                margin-top: 0.4rem;
                a{
                    width: 100%;
                    height: 100%;
                    display: block;
                    color: #f62461;
                }
            }
        }
        .rules{
            width: 13.18rem;
            height: 5.63rem;
            margin: 0 auto;
            background: url(../img/wback.png) no-repeat;
            background-position: 100% 100%;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            position: relative;
            div:first-child{
                margin-left: 0.6rem;
            }
            div:hover{
                cursor: pointer;
                transform: scale(1.1);
            }
            div{
                margin-left: 0.4rem;
                width: 3.74rem;
                height: 4.15rem;
                background: white;
                border-radius: 0.1rem;
                overflow: hidden;
                transform: scale(1);
                transition: 0.3s all ease;
                img{
                    width: 0.56rem;
                    height: 0.56rem;
                    display: block;
                    margin: 0.8rem auto 0.7rem;
                }
                h3{
                    font-size: 0.2rem;
                    color: $hui1;
                    text-align: center;
                    margin-bottom: 0.3rem;
                }
                p{
                    font-size: 0.16rem;
                    text-align: center;
                    color: $hui2;
                    line-height: 0.3rem;
                }
            }
            .btn{
                // width: 2.5rem;
                // height: 0.98rem;
                // display: block;
                // background: url(../img/btnback.png) no-repeat;
                // background-position: 100%;
                // background-size:100% 100%;
                width: 2.2rem;
                height: 0.6rem;
                background: white;
                position: absolute;
                left:50%;
                margin-left: -1.25rem;
                bottom:-0.1rem;
                color: $pink;
                font-size: 0.2rem;
                line-height: 0.6rem;
                text-align: center;   
                box-shadow: 0 0 20px #ffc5de;
                border-radius: 0.3rem;             
            }
        }
    }
    .aboutCompany:hover{
        cursor: pointer;
        background-size:105% 105%; 
    }
    .aboutCompany{
        width:100%;
        height: 8rem;
        background: url(../img/s_back.png) no-repeat;
        background-position: 100% 100%;
        background-size: 100% 100%;
        overflow: hidden;
        transition: 0.5s all ease;
        .title{
            width: 1.35rem;
            height: auto;
            display: block;
            margin: 1rem auto;
        }
        .con{
            width: 12.8rem;
            height: 4.85rem;
            background: url(../img/whiteback.png) no-repeat;
            background-position: 100%;
            background-size: 100% 100%;
            margin: 0 auto;
            overflow: hidden;
            display: flex;
            img{
                width: 6rem;
                height: 4rem;
                margin: 0.4rem;
                display: block;
            }
            .sintro{
                font-size: 0.2rem;
                color: #222222;
                line-height: 0.48rem;
                p:first-child{
                    margin-top: 1rem;
                }
                p:nth-child(2){
                    margin-bottom: 0.5rem;
                }
            }
        }
    }
    .edit{
        width:100%;
        height: 3.2rem;
        overflow: hidden;
        .contact{
            width: 12.8rem;
            height: auto;
            margin: 1rem auto;
            display: flex;
            justify-content: space-between;
            .person{
                width: 4rem;
                height: 1.2rem;
                border-radius: 0.1rem;
                box-shadow: 0 0 10px #f1e8ec;
                display: flex;
                .pic{
                    width: 0.7rem;
                    height: 0.7rem;
                    border-radius: 50%;
                    overflow: hidden;
                    margin: 0.25rem 0.2rem;
                    img{
                        width: 0.7rem;
                        height: 0.7rem;
                    }
                }
                .personmsg{
                    font-size: 0.16rem;
                    line-height:0.24rem;
                    p:first-child{
                        margin:0.2rem 0 0.15rem;
                        line-height:0.16rem;
                    }
                }
                
            }
        }
        
    }
    footer{
        width: 100%;
        height: 1.6rem;
        background: black;
        color: white;
        overflow: hidden;
        .bottom{
            font-size:0.14rem;
            margin-top: 0.3rem;
            text-align: center;
            line-height: 0.28rem;
        }
    }
}